<template>
  <div class="all">
    <div class="item">
      <div class="left">
        <span>Date</span>
        <span>Id</span>
        <span>description</span>
      </div>
      <div class="right">
        <span>total</span>
      </div>
    </div>
    <div v-for="(item, index) in $store.state.value" 
      :key="index" @click="set(item)">
      <div v-if="index>=$store.state.min&&index<$store.state.min+5">
        <div class="item" v-if="show||key!==item.id" 
          :class="{'onIndex': index==$store.state.onIndex}">
          <div class="left">
            <span>{{item.date}}</span>
            <span>{{item.id}}</span>
            <span>{{item.description}}</span>
          </div>
          <div class="right">
            <span>{{item.total}}</span>
            <span><button @click="remove(item)">删除</button></span>
          </div>
        </div>
        <div class="item" :class="'set'" v-if="!show&&key==item.id">
          <div class="left">
            <input type="text" :placeholder="item.date" v-model="date">
            <input type="text" :placeholder="item.id" v-model="id">
            <input type="text" :placeholder="item.description" v-model="description">
          </div>
          <div class="right">
            <input type="text" :placeholder="item.total" 
              class="setTotal" v-model="total">
            <span><button @click.stop="keep(item)">保存</button></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods:{
    remove(item){
      this.$store.commit("delete", item)
    },
    set(item){
      if(this.setShow){
        this.key = item.id
        this.show = false
        this.date = item.date
        this.id = item.id
        this.description = item.description
        this.total = item.total
        this.setShow = false
      }
    },
    keep(item){
      if(this.date&&this.id&&this.description&&this.total){
        let items = {
          date: this.date,
          id: this.id,
          description: this.description,
          total: this.total
        }
        let index = this.$store.state.value.findIndex((elem)=>{
          return elem.id == this.id
        })
        if(this.id == item.id||index==-1){
          let itemAll = {item:item, items:items}
          this.$store.commit("keep", itemAll)
          this.show = true
          this.key = 0 
          this.setShow = true
        }else{
          alert("输入错误")
        }
      }else{
        alert("保存错误")
      }
    }
  },
  data(){
    return {
      show: true,
      key: 0,
      date: '',
      id: '',
      description: '',
      total: '',
      setShow: true
    }
  }
}
</script>


<style scoped>
.item{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  border: 1px solid;
  height: 6vh;
}
.item .left{
  display: flex;
}
.item .left span{
  width: 20vw;
}
.item .left input{
  width: 19vw;
}
.item .left span:last-child{
  width: 40vw;
  overflow-x: scroll;
}
.item .left span:last-child::-webkit-scrollbar{
  height: 0;
  width: 0;
}
.setTotal{
  width: 20px;
}
</style>